<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="canvas" style="border: 1px solid #aaa; display: block;margin: 50px auto;">
			
			
		</canvas>
		<!--
        	作者：zyl
        	时间：2017-05-23
        	描述：lineJoin 和 miterLimit
        	
        1	lineJoin 属性设置或返回所创建边角的类型，当两条线交汇时。
 				值                                          描述
 				bevel	                       创建斜角。
 				round	                         创建圆角。
 				miter	                    默认。创建尖角。
 				
 		2	miterLimit 属性设置或返回最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。	
 		提示：只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。
                                   边角的角度越小，斜接长度就会越大。
                                     为了避免斜接长度过长，我们可以使用 miterLimit 属性。
                                 如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示	
     			值                                                                            描述
     			number          正数。规定最大斜接长度。如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 "bevel" 类型来显示。
        -->
		
	</body>
	
	<script>
	window.onload = function(){
	var canvas = document.getElementById("canvas");
	 canvas.width =1000;
	 canvas.height =980;
	 
	 	 var context = canvas.getContext("2d");//2d环境
	 context.lineWidth=10;//线条的宽度
	 context.strokeStyle="blue";//线的颜色
	 //context.fillStyle="red";//填充色
	 context.lineJoin ="round";
	 //context.miterLimit =20;

	 //开始
	 context.beginPath();
	 //绘制点
	  for(var i=0; i<5; i++){
   	      context.lineTo(Math.cos((18+i*72)/180*Math.PI)*300+400,
   								 -Math.sin((18+i*72)/180*Math.PI)*300+400);
    	context.lineTo(Math.cos((54+i*72)/180*Math.PI)*150+400,
   								 -Math.sin((54+i*72)/180*Math.PI)*150+400);
   }
	 //结束
	 context.closePath();
    context.stroke();
	}	
	</script>
</html>
